<!--
 * @Description: Description
 * @Date: 2022-03-25 16:05:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-06-02 17:13:32
 * @FilePath: \daobao-web\src\views\userInfo\userInfo.vue
-->
<template>
    <div style="padding:20px;">
        <div>
            <a-row type="flex">
                <a-col flex="auto">
                    <a-form type="flex" layout="inline">
                        <a-form-item label="工地名称">
                            <a-input v-model:value="query.siteName" placeholder="工地名称" style="width: 200px;" />
                        </a-form-item>
                        <a-form-item label="工地地址">
                            <a-input v-model:value="query.siteAddr" placeholder="工地地址" style="width: 200px;" />
                        </a-form-item>
                        <a-form-item label="工地有效期">
                            <a-range-picker v-model:value="time" format="YYYY-MM-DD" :allowClear="false"
                                style="width:200;" />


                        </a-form-item>
                    </a-form>
                </a-col>
                <a-col flex="150px" type="flex" justify="space-around">
                    <a-space size="large" align="end">
                        <a-button @click="getlist(1)" type="primary">查询</a-button>
                        <a-button @click="editModel" type="danger" style="background:#D96565;border-color:#D96565">新增
                        </a-button>
                        <a-button @click="download" type="primary" style="background:#3EBEC0;border-color:#3EBEC0">导出
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>

            <a-divider />
            <div>
                <a-table :columns="columns" :data-source="table" :rowKey="record=>record.vehicle" :loading="loading"
                    @change="(pag)=> getlist(pag.current)" bordered :pagination="pagination">
                    <template #bodyCell="{column,record,index}">
                        <template v-if="column.dataIndex=='index'">
                            <span>{{(parseInt(pagination.current)  - 1) * 10 + index + 1}} </span>
                        </template>
                        <template v-if="column.dataIndex=='action'">
                            <span>
                                <a-button class="ml10" size="small" @click="editModel(record,true)">
                                    <EyeOutlined />
                                </a-button>
                                <a-button class="ml10" size="small" @click="editModel(record,false)">
                                    <FormOutlined />
                                </a-button>
                                <a-popconfirm title="是否删除？" ok-text="是" cancel-text="否"
                                    @confirm="personDelete(record.siteId)">
                                    <a-button class="ml10" size="small">
                                        <CloseCircleOutlined />
                                    </a-button>
                                </a-popconfirm>
                            </span>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>
        <extendModel ref="extendRef" @getlist="getlist"></extendModel>
    </div>
</template>

<script setup>
    import {
        EyeOutlined,
        CloseCircleOutlined,
        FormOutlined,
    } from '@ant-design/icons-vue'

    import {
        computed,
        defineComponent,
        reactive, //响应式
        ref,
        watch,
        nextTick
    } from 'vue';
    import {
        message,
        Modal
    } from 'ant-design-vue';
    import {
        formatDateTime
    } from "@/utils"
    import extendModel from "@/view/map/electronFence/electronFenceExt.vue"


    const extendRef = ref();
    const pagination = computed(() => ({
        total: total.value,
        current: current.value,
        pageSize: pageSize.value,
    }));
    const
        UploadFileRef = ref(),
        total = ref(0),
        current = ref(1),
        pageSize = ref(10),
        tableIndex = ref(1),
        table = ref([]),
        query = ref({}),
        columns = [{
                title: '序号',
                dataIndex: 'index',
                key: 'index',
                align: 'center',

            },
            {
                title: '名称',
                dataIndex: 'name',
            },
            {
                title: '地址',
                dataIndex: 'addr',
                ellipsis: true,
            },
            {
                title: '电话',
                dataIndex: 'phone',
            },

            {
                title: '有效期开始时间',
                dataIndex: 'starttime',
            },
            {
                title: '有效期开始时间',
                dataIndex: 'endtime',
                ellipsis: true,
            },


            {
                title: '操作',
                width: 200,
                dataIndex: 'action',
                fixed: "right",

            },
        ];
    console.log(formatDateTime(new Date()))
    console.log(formatDateTime(new Date().getTime() + 30 * 24 * 60 * 60000))
    // const time = ref([moment(formatDateTime(new Date())),moment(formatDateTime(new Date().getTime() + 30 * 24 * 60 * 60000)) ])
    const time = ref([])



    const getlist = (index) => {
        current.value = index || 0
        console.log({
            "pageNum": current.value,
            "pageSize": pageSize.value,
            ...query.value,
            siteStartTermValidity: formatDateTime(time.value[0], "YYYY") + " 00:00:00",
            siteEndTermValidity: formatDateTime(time.value[1], "YYYY") + " 23:59:59",
        })
        table.value = [{
            id: "asdadsad",
            name: "测试",
            addr: "测试",
            phone: "测试",
            start: "2023-05-05 00:00:00",
            end: "2023-05-05 23:59:59",
            vehicleList: [{
                fleetName: "测试车队",
                fleetContact: "测试电话",
                plateNumber: "测试车牌",

            }],
            geoJson: [
                [
                    [121.427597, 31.276259],
                    [121.523677, 31.28816],
                    [121.551526, 31.248288],
                    [121.446395, 31.221499],
                    [121.401837, 31.194702],
                    [121.322466, 31.208399],
                    [121.286958, 31.235192]
                ]
            ]
        }]
    }



    const personDelete = (cid) => {
        message.success("删除成功！")
    }

    getlist(1)

    const editModel = (item, flag) => {
        extendRef.value.editModel(item, flag)
    }


    const download = () => {
        message.success("下载成功")
    }
</script>
<style lang="less" scoped>
</style>